<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="/lib/angular/angular.js"></script>
    <link rel="stylesheet" href="/static/css/index.css" type="text/css" />
    <link href="https://vjs.zencdn.net/7.0.2/video-js.css" rel="stylesheet">
</head>
<body ng-app="app" ng-controller="index">
    <!--<h1>游戏大厅</h1>-->
    <div class="videoinfo">

        <div class="redinfo">
            <span>红方</span>
            <span ng-if="info.status==0">等待开始</span>
            <span ng-if="info.status==10">开盆</span>
            <span ng-if="info.status==7">七扣</span>
            <span ng-if="info.status==6">六扣</span>
            <span ng-if="info.status==5">五扣</span>
            <span ng-if="info.status==-1">已关闭</span>
            <span>{{no}}---{{user.id}}/span></span>
            <ul>
                <li>开盆:  {{info.info.red_kaipen}}</li>
                <li>七扣:  {{info.info.red_qikou}}个</li>
                <li>六扣:  {{info.info.red_liukou}}个</li>
                <li>五扣:  {{info.info.red_wukou}}个</li>
            </ul>

            <span>{{redstatus}}</span>
            <div>
                <div class="rewards">
                    <div ng-if="info.status==0 || info.status == 10" ng-click="giveReward(reward,1)" ng-repeat="reward in rewards" >
                        <img src="/static/images/flower.png"><span>{{reward}}</span>
                    </div>

                    <div ng-if="info.status>0 && info.status<10" ng-click="giveReward(reward.value,1)" ng-repeat="reward in kou_rewards" >
                        <img src="/static/images/flower.png"><span>{{reward.name}}</span>
                    </div>
                </div>
            </div>

            <span ng-if="kou == 1">放扣</span>
            <span ng-if="kou == 2">接扣</span>
        </div>

        <!--ng-click="giveReward(333,1)"-->
        <div class="topvideo">
            <video id="topvideo" preload="auto" width="320" height="240">

            </video>
        </div>

        <div class="blueinfo">
            <span>蓝方</span>
            <ul>
                <li>开盆:  {{info.info.blue_kaipen}}</li>
                <li>七扣:  {{info.info.blue_qikou}}个</li>
                <li>六扣:  {{info.info.blue_liukou}}个</li>
                <li>五扣:  {{info.info.blue_wukou}}个</li>
            </ul>

            <span>{{bluestatus}}</span>
            <div>
                <div class="rewards">
                    <div ng-if="info.status==0 || info.status == 10" ng-click="giveReward(reward,2)" ng-repeat="reward in rewards" >
                        <img src="/static/images/flower.png"><span>{{reward}}</span>
                    </div>

                    <div ng-if="info.status>0 && info.status<10" ng-click="giveReward(reward.value,2)" ng-repeat="reward in kou_rewards" >
                        <img src="/static/images/flower.png"><span>{{reward.name}}</span>
                    </div>
                </div>
            </div>

            <span ng-if="kou == 1">接扣</span>
            <span ng-if="kou == 2">放扣</span>
        </div>

        <div style="clear: both"></div>
    </div>

    <!-- 下面区域 -->
    <div style="margin-top: 10px;">

        <div class="" style="float: left;width: 20%;height: 200px;background-color: #fff5d4">
            <span>今日战绩</span>
        </div>


        <div style="float: left;width: 40%;height: 200px;">
            <!--聊天窗口-->
            <div style="">
                <ul style="height: 150px;overflow-y: auto">
                    <li>XXX进入了房间</li>
                    <li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li><li>XXX进入了房间</li>
                </ul>
            </div>

            <div style="position: absolute;">
                <input /><button ng-click="sendmsg()">发送</button>
            </div>

        </div>



        <div class="" style="float: left;width:20%;height: 200px;background-color: #00b7ee;">
            <video id="bottomvideo" preload="auto" data-setup="{}">

            </video>
        </div>


        <div class="" style="float: left;width: 10%">
            <textarea>开放时间13：00-14:00</textarea>
            <span>{{user.name}}--{{user.mobile}}</span>
            <br/>
            <span>鲜花:{{user.score}}</span>
            <br/>
            <button ng-click="giveReward(100,0)">打赏平台</button>
            <br/>
            <button ng-click="openreport()">历史报表</button>
            <br/>
            <button ng-click="logout()">退出</button>

        </div>

        <div class="" style="clear: both"></div>

    </div>

    <script>

        var ws,myscope;

        var app = angular.module('app',[]);
        app.controller("index",function ($scope,$http) {
            $scope.uid; //用户ID 被user.id替代
            $scope.no ; //当前比赛ID
            $scope.kou; //当前放扣方
            $scope.topsrc = ""; //两个视频地址 写死
            $scope.bottomsrc = "";
            $scope.rewards = [100,200,300,400,500,600,700,800,900]; //开盆时的选项
            $scope.kou_rewards = [  //接扣和放扣时的选项
                {value:10,name:"10个"},{value:20,name:"20个"},{value:30,name:"30个"},{value:40,name:"40个"},{value:50,name:"50个"},{value:100,name:"100个"},
                {value:200,name:"200个"},{value:300,name:"300个"},{value:500,name:"500个"},
            ]
            $scope.status = false;  //比赛开始

            //播放视频
            $scope.readyplay = function (top, bottom) {
                var topplayer = videojs("topvideo");
                topplayer.width(100);
                topplayer.src(bottom);

                topplayer.ready(function () {
                    topplayer.play();
                })
//                var bottomplayer = videojs("bottomvideo").src(bottom);
//                bottomplayer.ready(function () {
//                    console.log("bot ready");
//                })
            }

            //打赏
            $scope.giveReward = function(score,who){
                //todo 提示框 选择框 弹出都要用组件展示
                if (!$scope.status || $scope.status == 0){
                    console.log("比赛还没有开始");return;
                }
                if ($scope.status >1 && $scope.status < 10){
                    if ($scope.kou == who){
                        //$scope.status
                        score = score*10*10; //放扣
                    }else{
                        score = score*10*$scope.status;//接扣
                    }
                }
                if (window.confirm("确定打赏"+score+"吗?")){
                    var msg = {
                        "type":"reward",
                        "uid":$scope.user.id,
                        "no":$scope.no,
                        "score":score,
                        "who":who,
                        "status":$scope.status
                    };
                    ws.send(JSON.stringify(msg));
                }
            }

            //聊天
            $scope.chat = function (str) {
                var msg = {
                    "type":"chat",
                    "uid":$scope.user.id,
                    "content":str
                }
                ws.send(JSON.stringify(msg));
            }

            //客户端连接上WS后 提交绑定UID
            $scope.binduid = function (clientid) {
                $http.get('{:url("auth/bind","",false)}/clientid/'+clientid).then(function () {
                    ws.send(JSON.stringify({type:"report",id:null}));
                    var msg = {
                        "type":"chat",
                        "content":"login",
                    }
                    //上线信息
                    ws.send(JSON.stringify(msg));
                });
                console.log("bind clientid:"+clientid);
            }
        })





        function connectWs() {
            ws = new WebSocket("ws:xs.stormrage.cn:8282");
            ws.onopen = function (event) {
                console.log("server conected...");
                myscope =angular.element(document.querySelector("[ng-controller=index]")).scope();
                //播放视频
                setTimeout(function () {
                    topsrc = "http://pili-live-hls.stormrage.cn/stormrage/test199.m3u8";
                    bottomsrc = "http://pili-live-hls.stormrage.cn/stormrage/test199t.m3u8";
//                    myscope.readyplay(topsrc,bottomsrc);
                },2000);
            }

            ws.onmessage = function (p1) {
                var data = JSON.parse(p1.data);
                console.log(data);
                var type = data.type || '';
                switch (type){
                    //初始化绑定UID CLIENTID
                    case "init":
                        myscope.binduid(data.data);
                        break;
                    //状态回调
                    case "status":
                        //这里新增一个1秒钟的Modal 显示
                        if (data.data){
                            console.log("操作成功");
                        }else{
                            console.log("操作失败");
                        }
                        break;
                    //UI更新
                    case "game_update":
                        console.log("比赛当前阶段:"+data.data.status+",当前放扣方:"+data.data.kou);
                        myscope.kou = data.data.kou;
                        myscope.info = data.data;
                        myscope.no = data.data.id;//游戏ID
                        myscope.status = data.data.status;
                        myscope.$apply();
                        break;
                    //用户信息
                    case "user":
                        myscope.user = data.data;
                        myscope.$apply();
                        break;
                    //用户本地当前分数更新  分数有多重验证 在此处更改分数无效
                    case "score_update":
                        myscope.user.score = data.data;
                        myscope.$apply();
                        break;
                    //请求重新刷新当前比赛信息
                    case "refresh":
                        ws.send(JSON.stringify({type:"report",id:null}));
                        break;
                    //本局结束  需要打开一个新的modal显示表格  显示本局本用户的记录信息  本部分由异步处理  表格重新请求服务端
                    case "result":
                        console.log("本局结束,请求结算数据");
                        ws.send(JSON.stringify({id:myscope.no,uid:myscope.user.id,type:"result"}));
                        console.log(data.data);
                        break;
                    //聊天信息 需要显示在聊天窗口并且拖到最下
                    case "chat":
                        console.log(data.data);
                        break;
                }
            }
            ws.onerror = function (event) {
                if (event.type == "error"){
                    alert("服务器连接失败，请稍后重试");
                }
                console.log(event);
            }
            ws.onclose = function (p1) {
                console.log(p1);
            }
        }

        connectWs();

    </script>
    <script src="https://vjs.zencdn.net/7.0.2/video.js"></script>
</body>
</html>